<template>
  <div class="wrap">
    <div class="temp">
      <div class="temp_item" :class="{enable_temp: item.status === 'enable', disable_temp: item.status === 'disable', active: item._id === currentTemp.tempId }"
           v-for="(item, index) in questionnaireTemp"
           @click="chooseQuesTemp(index, item._id)">
          {{item.name}}
      </div>
      <div class="add_temp" @click="addTemp"><i class="iconfont icon-zhankai"></i>{{$t('qualityCheck.addTempl')}}</div>
      <el-dialog :close-on-click-modal="false" :title="$t('configLazyLoad.questionnaireConfig.addQuesTemp')" modal-append-to-body lock-scroll :visible.sync="dialogVisible" width="30%">
        <el-form labelPosition="top" :rules="rules" :model="addTempData" ref="ruleForm">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('configLazyLoad.questionnaireConfig.quesTempName')" prop="name">
                <el-input v-model.trim="addTempData.name" :maxlength="10"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('configLazyLoad.questionnaireConfig.quesTempType')" prop="type">
                <el-select style="width: 100%" v-model="addTempData.type" :placeholder="$t('public.pleasePick')">
                  <el-option :label="$t('configLazyLoad.questionnaireConfig.flexible')" :value="'flexible'"></el-option>
                  <el-option :label="$t('configLazyLoad.questionnaireConfig.dynamic')" :value="'dynamic'"></el-option>
                  <el-option :label="$t('configLazyLoad.questionnaireConfig.static')" :value="'static'"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="primary_btn"  @click="cancel()">{{$t('public.cancel')}}</el-button>
          <el-button class="primary_btn" type="primary" @click="confirm()">{{$t('public.confirm')}}</el-button>
        </div>
      </el-dialog>
    </div>
    <div v-if="questionnaireTemp.length">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="$t('configLazyLoad.questionnaireConfig.infoConfig')" name="questionnaireTempInfoConfig"></el-tab-pane>
        <el-tab-pane :label="$t('configLazyLoad.questionnaireConfig.fieldDefine')" name="questionnaireFieldConfig"></el-tab-pane>
        <el-tab-pane :label="$t('configLazyLoad.questionnaireConfig.tempConfig')" name="questionnaireSetIndex"></el-tab-pane>
        <el-tab-pane :label="$t('configLazyLoad.questionnaireConfig.statusConfig')" name="questionnaireTempStatusConfig"></el-tab-pane>
        <keep-alive>
          <component :is="activeName" :tempId="currentTemp.tempId" @refreshTemp="refreshTemp" class="content"></component>
        </keep-alive>
      </el-tabs>
    </div>
  </div>
</template>
<script>
  import questionnaireTempInfoConfig from './questionnaireTempInfoConfig.vue'   // 信息配置
  import questionnaireFieldConfig from './questionnaireFieldConfig.vue'  // 字段配置
  import questionnaireSetIndex from './questionnaireSetIndex.vue'   // 模板配置
  import questionnaireTempStatusConfig from './questionnaireTempStatusConfig.vue'   // 状态配置
  export default {
    name: 'questionnaireInfo',
    data () {
      return {
        questionnaireTemp: [],
        currentTemp: {
          tempId: '',
          index: 0
        },
        activeName: 'questionnaireTempInfoConfig',
        dialogVisible: false,
        rules: {
          name: [
            { required: true, message: this.$t('configLazyLoad.questionnaireConfig.nameCannotBeEmpty'), trigger: 'blur' }
          ]
        },
        addTempData: {
          name: '',
          type: 'flexible',
          qstatus: {
            success: this.$t('configLazyLoad.questionnaireConfig.visitSuccess'),
            invalid: this.$t('configLazyLoad.questionnaireConfig.invalidPhone'),
            noAnswer: this.$t('configLazyLoad.questionnaireConfig.noAnswer'),
            imparity: this.$t('configLazyLoad.questionnaireConfig.noCooperate'),
            other: this.$t('configLazyLoad.questionnaireConfig.other')
          }
        }
      }
    },
    components: {
      questionnaireFieldConfig,
      questionnaireSetIndex,
      questionnaireTempStatusConfig,
      questionnaireTempInfoConfig
    },
    computed: {
    },
    methods: {
      getQuestionTemp () {
        this.$store.dispatch('queryAccountQuestionnaireTemp', {}).then((res) => {
          if (res && res.success) {
            this.currentTemp.index = 0
            this.currentTemp.tempId = res.data[0] ? res.data[0]._id : ''
            this.questionnaireTemp = res.data
          }
        })
      },
      chooseQuesTemp (index, _id) {
        this.currentTemp.index = index
        this.currentTemp.tempId = _id
      },
      handleClick (tab, event) {
      },
      addTemp () {
        this.dialogVisible = true
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields()
        }
      },
      refreshTemp () { // 刷新模板
        this.$store.dispatch('queryAccountQuestionnaireTemp', {}).then((res) => {
          if (res && res.success) {
            this.questionnaireTemp = res.data
            if (this.questionnaireTemp.length === 1) {
              this.currentTemp.tempId = this.questionnaireTemp[0]._id
            }
          }
        })
        this.$store.dispatch('refreshCacheFromDb', {type: 'questionnaireTemp'})
      },
      confirm () {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.$store.dispatch('addQuestionnaireTemp', this.addTempData).then((res) => {
              if (res && res.success) {
                this.refreshTemp()
                this.dialogVisible = false
                this.$message({
                  message: this.$t('configLazyLoad.questionnaireConfig.addTempSuccess'),
                  type: 'success'
                })
              } else if (res.message) {
                this.$message.error(res.message)
              }
            })
          } else {
            return false
          }
        })
      },
      cancel () {
        this.dialogVisible = false
      }
    },
    beforeMount () {
    },
    mounted () {
      this.getQuestionTemp()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .wrap
    padding 20px
    height calc(100vh - 184px)
    overflow-y: auto;
    .temp_item
      display inline-block
      padding 5px 10px
      margin 0 5px 10px 0
      line-height 14px
      cursor pointer
    .temp_item:hover
      background-color #f4fffe
    .enable_temp
      color $c-main
    .enable_temp:hover
      padding 4px 9px
      background-color: #f4fffe
      border: 1px solid $c-main
      border-radius: 4px
    .enable_temp.active
      padding 4px 9px
      background-color: #f4fffe
      border: 1px solid $c-main
      border-radius: 4px
    .disable_temp
      color $c-pink
    .disable_temp:hover
      padding 4px 9px
      background-color: rgba(237, 89, 113, 0.12)
      border: 1px solid $c-pink
      border-radius: 4px
    .disable_temp.active
      padding 4px 9px
      background-color: rgba(237, 89, 113, 0.12)
      border: 1px solid $c-pink
      border-radius: 4px
    .add_temp
      padding 4px 9px
      border 1px solid $c-main
      border-radius 4px
      display inline-block
      color $c-main
      cursor pointer
      .icon-zhankai
        margin-right 5px
</style>
